import { Link, Outlet } from 'umi';
import styles from './index.less';
import useRefs from '@/hooks/useRefs';
import { useEffect } from 'react';

export default function Layout() {
  const [getRef, removeRef] = useRefs<string,HTMLLIElement>();

  useEffect(() => {
    console.log(getRef('home'));
    console.log(getRef('intersecobserve'));
  }, []);
  return (
    <div className={styles.navs}>
      <ul className={styles.menu}>
        <li ref = {getRef('home')}>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
        <li ref = {getRef('intersecobserve')}>
          <Link to="/intersecobserve">hooks-intersectionobservr</Link>
        </li>
        <li>
          <Link to="/link-chat">链接到聊天服务器</Link>
        </li>
        <li>
          <Link to="/listen-winevent">通用windows事件注册(无实用价值)</Link>
        </li>
        <li>
          <Link to="/transition">无阻塞更新状态</Link>
        </li>
        <li>
          <Link to="/lazydemo">lazy 懒加载</Link>
        </li>
        <li>
          <Link to="/layoutEffect">layoutEffect 使用</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}
